<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  <meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <link rel="icon" type="image/png" href="icon.png" />
  <!--{if svg_edit_release}>
  <link rel="stylesheet" href="css/method-draw.compiled.css" type="text/css"/>
<!{else}-->
  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="src/videojs-ie8.min.js"></script> -->
  <link rel="stylesheet" href="lib/jgraduate/css/jPicker.css" type="text/css" />
  <link rel="stylesheet" href="lib/jgraduate/css/jgraduate.css" type="text/css" />
  <link rel="stylesheet" href="css/method-draw.css" type="text/css" />
  <link rel="stylesheet" href="css/fonts.css" type="text/css" />
	<link rel="stylesheet" href="css/video.css" type="text/css" />
  <link rel="stylesheet" href="css/pagination.css" type="text/css" />
  <link rel="stylesheet" href="css/index.css" type="text/css" />
  <!--{endif}-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <script type="text/javascript" src="lib/jquery.min.js"></script>
  <!--{if svg_edit_release}>
  <script type="text/javascript" src="method-draw.compiled.js"></script>
<!{else}-->
  <script type="text/javascript" src="lib/pathseg.js"></script>
  <script type="text/javascript" src="lib/touch.js"></script>
  <script type="text/javascript" src="lib/js-hotkeys/jquery.hotkeys.min.js"></script>
  <script type="text/javascript" src="icons/jquery.svgicons.js"></script>
  <script type="text/javascript" src="lib/jgraduate/jquery.jgraduate.js"></script>
  <script type="text/javascript" src="lib/contextmenu/jquery.contextMenu.js"></script>
  <script type="text/javascript" src="lib/jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
  <script type="text/javascript" src="src/browser.js"></script>
  <script type="text/javascript" src="src/svgtransformlist.js"></script>
  <script type="text/javascript" src="src/math.js"></script>
  <script type="text/javascript" src="src/units.js"></script>
  <script type="text/javascript" src="src/svgutils.js"></script>
  <script type="text/javascript" src="src/sanitize.js"></script>
  <script type="text/javascript" src="src/history.js"></script>
  <script type="text/javascript" src="src/select.js"></script>
  <script type="text/javascript" src="src/draw.js"></script>
  <script type="text/javascript" src="src/path.js"></script>
  <script type="text/javascript" src="src/dialog.js"></script>
  <script type="text/javascript" src="src/svgcanvas.js"></script>
  <script type="text/javascript" src="src/method-draw.js"></script>
  <script type="text/javascript" src="lib/jquery-draginput.js"></script>
  <script type="text/javascript" src="lib/contextmenu.js"></script>
  <script type="text/javascript" src="lib/jgraduate/jpicker.min.js"></script>
  <script type="text/javascript" src="lib/mousewheel.js"></script>
  <!-- <script type="text/javascript" src="extensions/ext-eyedropper.js"></script> -->
  <!-- <script type="text/javascript" src="extensions/ext-shapes.js"></script> -->
  <!-- <script type="text/javascript" src="extensions/ext-grid.js"></script> -->
  <script type="text/javascript" src="lib/requestanimationframe.js"></script>
  <script type="text/javascript" src="lib/taphold.js"></script>
  <script type="text/javascript" src="lib/filesaver.js"></script>
  <script type="text/javascript" src="src/rgbcolor.js"></script>
  <script type="text/javascript" src="lib/videojs/video.min.js"></script>
  <script type="text/javascript" src="lib/videojs/videojs-contrib-hls.min.js"></script>
  <script type="text/javascript" src="src/jquery.pagination.js"></script>
  <script type="text/javascript" src="src/numberInput.js"></script>
  <script type="text/javascript" src="src/html_browser.js"></script>
  <!--用于预览和发布-->
  <script type="text/javascript" src="src/html2canvas.js"></script>
  <script type="text/javascript" src="src/index.js"></script>
  <!--{endif}-->
  <title>智慧媒体管理系统</title>
  <script>
    (function(){
      var random = Date.parse(new Date());
      var elements = document.getElementsByTagName("script");
      for(var i=0;i<elements.length;i++){
        var element = elements[i];
        if(element.src){
          if(element.src.indexOf('?')>-1){
            element.src = element.src + 'timestamp='+random;
          }else{
            element.src = element.src + '?timestamp='+random;
          }
        }
        
      }
      // var links = document.getElementsByTagName("link");
      // for(var j=0;j<links.length;j++){
      //   var link = links[j];
      //   if(link.href){
      //     link.href = link.href + '?timestamp='+random;
      //   }
      // }
    })()
  </script>
</head>
<div id="svg_editor">

  <div id="rulers">
    <div id="ruler_corner"></div>
    <div id="ruler_x" class="h-container">
      <div id="ruler_x_cursor"></div>
      <!-- <div class="h-container"> -->
      <canvas class="ruler" height="16"></canvas>
      <div class="lines">
        <div class="line" style="left: 766.352px;">
          <div class="action"><span class="del">×</span><span class="value">980</span></div>
        </div>
      </div>
      <!-- </div> -->
    </div>
    <div id="ruler_y" class="v-container">
      <div id="ruler_y_cursor"></div>
      <!-- <div class="v-container"> -->
      <canvas class="ruler" width="16"></canvas>
      <!-- </div> -->
    </div>
  </div>

  <div id="workarea">
    <div id="svgcanvas" style="position:relative">

    </div>
  </div>

  <div id="menu_bar">
    <a class="menu" style="display: none;">
      <div class="menu_title" id="logo"></div>
      <div class="menu_list">
        <div id="tool_about" class="menu_item">About this Editor...</div>
        <div class="separator"></div>
        <div id="tool_about" class="menu_item">Keyboard Shortcuts...</div>
      </div>
    </a>

    <div class="menu">
      <a href="javascript:void(0)" id="edit_out" class="menu_title">
        <img src="images/editout.svg">
        <span>退出编辑</span>
      </a>
      <!-- <a href="javascript:void(0)" id="tool_undo" class="menu_title disabled">
        <img src="images/undo.svg">
        <span>撤销</span>
      </a>
      <a href="javascript:void(0)" id="tool_redo" class="menu_title disabled">
        <img src="images/redo.svg">
        <span>恢复</span>
      </a> -->
    </div>
    <div id="template_name">模板名称</div>
    <div class="menu">
      <!-- <a href="javascript:void(0)" id="create" class="menu_title">
      <img src="images/new.svg">
      <span>新建</span>
    </a> -->
    <!-- <a href="javascript:void(0)" id="tool_clear" class="menu_title">
      <img src="images/preview.svg">
      <span>清空</span>
    </a> -->
      <a href="javascript:void(0)" id="tool_preview" class="menu_title">
        <img src="images/preview.svg">
        <span>预览</span>
      </a>
      <a href="javascript:void(0)" id="save" class="menu_title">
        <img src="images/save.svg">
        <span>保存</span>
      </a>
      <a href="javascript:void(0)" id="tool_publish" class="menu_title">
        <svg viewBox="64 64 896 896" focusable="false" data-icon="share-alt" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 000-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"></path></svg>
        <span>一键发布</span>
      </a>
    </div>
  </div>
  <div id="tools_top" class="tools_panel">
    <!-- 素材选择区域 -->
    <div id="canvas_panel" class="material_panel context_panel">
      <h4>画布</h4>
      <div class="tab">
        <label class="canvas active">样式</label>
        <label class="img">图片</label>
        <label class="video">视频</label>
      </div>
      <div class="content">
        <div class="loading" style="display: none;">
          <span class="ant-spin-dot ant-spin-dot-spin">
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
            <i class="ant-spin-dot-item"></i>
          </span>
        </div>
        <span class="search-filed">
          <input placeholder="搜索素材" class="search" type="text" value="" />
          <span class="search-btn"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="search"
              width="1em" height="1em" fill="currentColor" aria-hidden="true">
              <path
                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
              </path>
            </svg></span>
        </span>
        <div class="list_content canvas">
          <label title="鼠标滚动或双击输入设置画布宽度">
            <input size="3" id="canvas_width" type="text" pattern="[0-9]*" />
            <span class="icon_label">宽度</span>
          </label>
          <label title="鼠标滚动或双击输入设置画布高度">
            <input id="canvas_height" size="3" type="text" pattern="[0-9]*" />
            <span class="icon_label">高度</span>
          </label>
          <label title="点击设置画布颜色" class="draginput">
            <span>画布颜色</span>
            <div id="color_canvas_tools">
              <div class="color_tool active" id="tool_canvas">
                <div class="color_block">
                  <div id="canvas_bg"></div>
                  <div id="canvas_color"></div>
                </div>
              </div>
            </div>
          </label>
        </div>
        <div class="list_content img">
          <ul></ul>
        </div>
        <div class="list_content video">
          <ul></ul>
        </div>
        <div class="page" style="display: none;"></div>
      </div>
    </div>
    <!-- 素材选择区域 -->

    <!--二维码 条形码控制区域-->
    <div id="code_panel" class="context_panel">
      <h4>二维码</h4>
      <span class="content">
        <input placeholder="请输入" class="search" type="text" value="" style="display: inline-block;">
      </span>
      <span class="error">请输入生成的二维码内容</span>
      <span class="button">生成</span>
    </div>
    <!--二维码 条形码控制区域-->

    <!--网页控制区域-->
    <div id="webpage_panel" class="context_panel">
      <h4>网页</h4>
      <span class="content">
        <input placeholder="请输入网址" class="search" type="text" value="" style="display: inline-block;">
      </span>
      <span class="error">请输入网址</span>
      <span class="button">前往</span>
    </div>
    <!--网页控制区域-->

     <!--直播控制区域-->
     <div id="live_panel" class="context_panel">
      <h4>直播</h4>
      <span class="content">
        <input placeholder="请输入直播流地址" class="search" type="text" value="" style="display: inline-block;">
      </span>
      <span class="error">请输入直播地址</span>
      <span class="button">前往</span>
    </div>
    <!--直播控制区域-->

    <div id="path_panel" class="context_panel clearfix">
      <h4 class="clearfix">图形</h4>
      <label>
        <input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x"
          pattern="[0-9]*" />
        <span>X轴</span>
      </label>
      <label>
        <input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="y"
          pattern="[0-9]*" />
        <span>Y轴</span>
      </label>
    </div>

    <div id="image_panel" class="context_panel clearfix">
      <h4>Image</h4>
      <label>
        <input id="image_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x"
          pattern="[0-9]*" />
        <span>X</span>
      </label>
      <label>
        <input id="image_y" class="attr_changer" data-title="Change Y coordinate" size="3" data-attr="y"
          pattern="[0-9]*" />
        <span>Y</span>
      </label>
      <label>
        <input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width"
          pattern="[0-9]*" />
        <span class="icon_label">Width</span>
      </label>
      <label>
        <input id="image_height" class="attr_changer" data-title="Change image height" size="3" data-attr="height"
          pattern="[0-9]*" />
        <span class="icon_label">Height</span>
      </label>
    </div>

    <div id="circle_panel" class="context_panel">
      <h4>Circle</h4>
      <label id="tool_circle_cx">
        <span>Center X</span>
        <input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx" />
      </label>
      <label id="tool_circle_cy">
        <span>Center Y</span>
        <input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy" />
      </label>
      <label id="tool_circle_r">
        <span>Radius</span>
        <input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r" />
      </label>
    </div>

    <div id="ellipse_panel" class="context_panel clearfix">
      <h4>Ellipse</h4>
      <label id="tool_ellipse_cx">
        <input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="cx"
          pattern="[0-9]*" />
        <span>X</span>
      </label>
      <label id="tool_ellipse_cy">
        <input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" size="3" data-attr="cy"
          pattern="[0-9]*" />
        <span>Y</span>
      </label>
      <label id="tool_ellipse_rx">
        <input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" size="3" data-attr="rx"
          pattern="[0-9]*" />
        <span>Radius X</span>
      </label>
      <label id="tool_ellipse_ry">
        <input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" size="3" data-attr="ry"
          pattern="[0-9]*" />
        <span>Radius Y</span>
      </label>
    </div>

    <div id="line_panel" class="context_panel clearfix">
      <h4>Line</h4>
      <label id="tool_line_x1">
        <input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" size="3"
          data-attr="x1" pattern="[0-9]*" />
        <span>Start X</span>
      </label>
      <label id="tool_line_y1">
        <input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" size="3"
          data-attr="y1" pattern="[0-9]*" />
        <span>Start Y</span>
      </label>
      <label id="tool_line_x2">
        <input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" size="3" data-attr="x2"
          pattern="[0-9]*" />
        <span>End X</span>
      </label>
      <label id="tool_line_y2">
        <input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" size="3" data-attr="y2"
          pattern="[0-9]*" />
        <span>End Y</span>
      </label>
    </div>
    <!----textarea---->
    <div id="textarea_panel" class="context_panel">
      <h4>文本框</h4>
      <label>
        <input id="textarea_x" class="attr_changer" data-title="鼠标滚动或双击输入设置X轴位置。<br/>快捷键：← → 或 shift + ← →" size="3" data-attr="x" pattern="[0-9]*" />
        <span>X轴</span>
      </label>
      <label>
        <input id="textarea_y" class="attr_changer" data-title="鼠标滚动或双击输入设置Y轴位置。<br/>快捷键：↑↓ 或 shift + ↑↓" size="3" data-attr="y" pattern="[0-9]*" />
        <span>Y轴</span>
      </label>
      <label id="textarea_width_tool attr_changer">
        <input id="textarea_width" class="attr_changer" data-title="鼠标滚动或双击输入设置宽度" size="3" data-attr="width"
          pattern="[0-9]*" />
        <span class="icon_label">宽度</span>
      </label>
      <label id="textarea_height_tool">
        <input id="textarea_height" class="attr_changer" data-title="鼠标滚动或双击输入设置高度" size="3" data-attr="height" type="text"
          pattern="[0-9]*" />
        <span class="icon_label">高度</span>
      </label>
      <div class="toolset draginput select twocol" id="tool_textarea_font_family">
        <!-- Font family -->
        <div style="position: relative;">
          <span>字体</span>
          <div id="textarea_preview_font" style="font-family: Helvetica, Arial, sans-serif;">Helvetica</div>
          <div class="caret"></div>
          <input id="textarea_font_family" data-title="Change Font Family" size="12" type="hidden" />
          <select id="textarea_font_family_dropdown" title="选择设置字体样式">
            <option value="Arvo, sans-serif">Arvo</option>
            <option value="'Courier New', Courier, monospace">Courier</option>
            <option value="Euphoria, sans-serif">Euphoria</option>
            <option value="Georgia, Times, 'Times New Roman', serif">Georgia</option>
            <option value="Helvetica, Arial, sans-serif" selected="selected">Helvetica</option>
            <option value="Junction, sans-serif">Junction</option>
            <option value="'League Gothic', sans-serif">League Gothic</option>
            <option value="Oswald, sans-serif">Oswald</option>
            <option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">Palatino</option>
            <option value="'Trebuchet MS', Gadget, sans-serif">Trebuchet</option>
            <option value="'Shadows Into Light', serif">Shadows Into Light</option>
            <option value="'Simonetta', serif">Simonetta</option>
            <option value="'Times New Roman', Times, serif">Times</option>
            <option class="android" value="sans" style="display: none;">Sans</option>
            <option class="android" value="serif" style="display: none;">Serif</option>
            <option class="android" value="monospace" style="display: none;">Monospace</option>
          </select>
        </div>
        <div style="position: relative;display: flex;">
          <div class="tool_button" id="tool_textarea_bold" data-title="点击设置字体加粗样式。<br>快捷键：ctrl+B">B</div>
          <div class="tool_button" id="tool_textarea_italic" data-title="点击设置字体倾斜样式。<br>快捷键：ctrl+I">i</div>
          <div class="tool_button" id="tool_textarea_underline" data-title="点击设置字体下划线样式。<br>快捷键：ctrl+U">U</div>
        </div>
      </div>

      <label id="tool_textarea_font_size">
        <input id="textarea_font_size" size="3" value="0" data-title="鼠标滚动或双击输入设置字体大小"/>
        <span class="font_sizeLabel" class="icon_label">字体大小</span>
      </label>

      <label id="tool_textarea_line_height">
        <input id="textarea_line_height" size="3" value="0" data-title="鼠标滚动或双击输入设置字体行间距"/>
        <span class="font_lineHeightLabel" class="icon_label">行间距</span>
      </label>
      <!-- Not visible, but still used -->
      <input id="textarea" type="text" size="35" />
    </div>
    <!----->
    <div id="text_panel" class="context_panel">
      <h4>单行文本输入框</h4>
      <label>
        <input id="text_x" class="attr_changer" title="鼠标滚动或双击输入设置X轴位置" size="3" data-attr="x" pattern="[0-9]*" />
        <span>X轴</span>
      </label>
      <label>
        <input id="text_y" class="attr_changer" title="鼠标滚动或双击输入设置Y轴位置" size="3" data-attr="y" pattern="[0-9]*" />
        <span>Y轴</span>
      </label>

      <!-- <div class="toolset draginput select twocol" id="tool_font_family">
        <span>字体</span>
        <div id="preview_font" style="font-family: Helvetica, Arial, sans-serif;">Helvetica</div>
        <div class="caret"></div>
        <input id="font_family" data-title="Change Font Family" size="12" type="hidden" />
        <select id="font_family_dropdown" title="选择设置字体样式">
          <option value="Arvo, sans-serif">Arvo</option>
          <option value="'Courier New', Courier, monospace">Courier</option>
          <option value="Euphoria, sans-serif">Euphoria</option>
          <option value="Georgia, Times, 'Times New Roman', serif">Georgia</option>
          <option value="Helvetica, Arial, sans-serif" selected="selected">Helvetica</option>
          <option value="Junction, sans-serif">Junction</option>
          <option value="'League Gothic', sans-serif">League Gothic</option>
          <option value="Oswald, sans-serif">Oswald</option>
          <option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">Palatino</option>
          <option value="'Trebuchet MS', Gadget, sans-serif">Trebuchet</option>
          <option value="'Shadows Into Light', serif">Shadows Into Light</option>
          <option value="'Simonetta', serif">Simonetta</option>
          <option value="'Times New Roman', Times, serif">Times</option>
        </select>
        <div class="tool_button" id="tool_bold" title="点击设置字体加粗样式">B</div>
        <div class="tool_button" id="tool_italic" title="点击设置字体倾斜样式">i</div>
      </div> -->
      <label id="tool_font_size" data-title="鼠标滚动或双击输入设置字体大小">
        <input id="font_size" size="3" value="0" />
        <span class="font_sizeLabel" class="icon_label">字体大小</span>
      </label>
      <!-- Not visible, but still used -->
      <input id="text" type="text" size="35" />
    </div>

    <div id="color_tools" class="context_panel clearfix toolset">
      <label class="draginput" title="点击设置字体颜色">
        <span>字体颜色</span>
        <div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
        <div class="color_tool active" id="tool_fill">
          <!-- <label class="icon_label" title="Change fill color"></label> -->
          <div class="color_block">
            <div id="fill_bg"></div>
            <div id="fill_color" class="color_block"></div>
          </div>
        </div>

        <div class="color_tool" id="tool_stroke">
          <label class="icon_label" title="Change stroke color"></label>
          <div class="color_block">
            <div id="stroke_bg"></div>
            <div id="stroke_color" class="color_block" title="Change stroke color"></div>
          </div>
        </div>
      </label>
    </div>
    <div id="background_tools" class="context_panel clearfix toolset">
      <label class="draginput" title="点击设置背景颜色">
        <span>背景颜色</span>
        <!-- <div id="tool_switch" title="Switch stroke and fill colors [X]"></div> -->
        <div class="color_tool active" id="background_fill">
          <!-- <label class="icon_label" title="Change fill color"></label> -->
          <div class="color_block">
            <div id="background_bg"></div>
            <div id="background_color" class="color_block"></div>
          </div>
        </div>
        <div class="color_tool" id="tool_stroke">
          <label class="icon_label" title="Change stroke color"></label>
          <div class="color_block">
            <div id="stroke_bg"></div>
            <div id="stroke_color" class="color_block" title="Change stroke color"></div>
          </div>
        </div>
      </label>
    </div>

    <!-- formerly gsvg_panel -->
    <div id="container_panel" class="context_panel clearfix">
    </div>

    <div id="use_panel" class="context_panel clearfix">
      <div class="tool_button clearfix" id="tool_unlink_use" data-title="Break link to reference element (make unique)">
        Break link reference</div>
    </div>

    <div id="g_panel" class="context_panel clearfix">
      <h4>Group</h4>
      <label>
        <input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" size="3" data-attr="x"
          pattern="[0-9]*" />
        <span>X</span>
      </label>
      <label>
        <input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" size="3" data-attr="y"
          pattern="[0-9]*" />
        <span>Y</span>
      </label>
    </div>

    <div id="path_node_panel" class="context_panel clearfix">
      <h4>Edit Path</h4>

      <label id="tool_node_x">
        <input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" size="3" data-attr="x" />
        <span>X</span>
      </label>
      <label id="tool_node_y">
        <input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" size="3" data-attr="y" />
        <span>Y</span>
      </label>

      <div id="segment_type" class="draginput label">
        <span>Segment Type</span>
        <select id="seg_type" data-title="Change Segment type">
          <option id="straight_segments" selected="selected" value="4">Straight</option>
          <option id="curve_segments" value="6">Curve</option>
        </select>
        <div class="caret"></div>
        <label id="seg_type_label">Straight</label>
      </div>
      <div class="clearfix"></div>
      <div class="tool_button" id="tool_node_clone" title="Adds a node">Add Node</div>
      <div class="tool_button" id="tool_node_delete" title="Delete Node">Delete Node</div>
      <div class="tool_button" id="tool_openclose_path" title="Open/close sub-path">Open Path</div>
    </div>

    <!-- Buttons when a single element is selected -->
    <div id="selected_panel" class="context_panel">

      <label id="tool_angle" class="draginput">
        <input id="angle" class="attr_changer" size="2" value="0" data-attr="transform" data-min="-180" data-max="180"
          type="text" data-title="鼠标滚动或双击输入设置旋转角度。<br/>快捷键：ctrl+ ← → 或 ctrl+shift+ ← →" />
        <span class="icon_label">旋转</span>
        <div id="tool_angle_indicator">
          <div id="tool_angle_indicator_cursor"></div>
        </div>
      </label>

      <label class="toolset" id="tool_opacity">
        <input id="group_opacity" class="attr_changer" data-attr="opacity" data-multiplier="0.01" size="3" value="100"
          step="5" min="0" max="100" data-title="鼠标滚动或双击输入设置透明度"/>
        <span id="group_opacityLabel" class="icon_label">透明度</span>
      </label>

      <!-- <div class="toolset" id="tool_blur" title="鼠标滚动或双击输入设置模糊度">
        <label>
          <input id="blur" size="2" value="0" step=".1" min="0" max="10" />
          <span class="icon_label">模糊度</span>
        </label>
      </div> -->

      <label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
        <input id="rect_rx" size="3" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
        <span class="icon_label">圆角</span>
      </label>

      <div class="clearfix"></div>
      <div id="align_tools">
        <h4>对齐</h4>
        <div class="toolset align_buttons" id="tool_position">
          <label>
            <div class="col last clear" id="position_opts">
              <div class="draginput_cell" id="tool_posleft" title="水平 左对齐"></div>
              <div class="draginput_cell" id="tool_poscenter" title="水平 居中对齐"></div>
              <div class="draginput_cell" id="tool_posright" title="水平 右对齐"></div>
              <div class="draginput_cell" id="tool_postop" title="垂直 居上"></div>
              <div class="draginput_cell" id="tool_posmiddle" title="垂直 居中"></div>
              <div class="draginput_cell" id="tool_posbottom" title="垂直 居下"></div>
            </div>
          </label>
        </div>
      </div>
    </div>
  </div> <!-- tools_top -->
  <div id="cur_context_panel">
  </div>
  <div id="tools_left" class="tools_panel">
    <div class="reference_line">
      <h3>参考线</h3>
      <span>
        <span class="label">模式：</span>
        <select>
          <option value=0 selected>平均</option>
          <option value=1>自定义</option>
        </select>
      </span>
      <span>
        <span class="label">横向：</span>
        <div class="x number"></div>
        <input type="text" class="x custom" />
      </span>
      <span>
        <span class="label">纵向：</span>
        <div class="y number"></div>
        <input type="text" class="y custom" />
      </span>
      <span class="button">确定</span>
    </div>
    <!--横屏-->
    <h3 class="layoutLabel" style="display: none;">基本布局</h3>
    <div class="layout horizontal" style="display: none;">
      <svg width="120px" height="68px" viewBox="0 0 120 68" layout="H1">
        <title>横屏-1</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1" stroke-opacity="0.2">
          <g transform="translate(-8.000000, -86.000000)" fill="#FFFFFF" stroke="#FFFFFF">
            <g>
              <rect id="\u77E9\u5F62" x="8.5" y="86.5" width="119" height="67">
              </rect>
            </g>
          </g>
        </g>
      </svg>
      <svg width="120px" height="68px" viewBox="0 0 120 68" layout="H2">
        <title>横屏-2</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g  transform="translate(-8.000000, -162.000000)" stroke="#FFFFFF">
            <g>
              <g id="Group" transform="translate(8.000000, 162.000000)">
                <rect stroke-opacity="0.2" fill-opacity="0.1" fill="#FFFFFF" x="0.5" y="0.5" width="119" height="67"></rect>
                <path d="M60,1.5 L60,66.5" opacity="0.2" stroke-linecap="square"></path>
                <path d="M59.5,34 L118.5,34" opacity="0.2" stroke-linecap="square"></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <svg width="120px" height="68px" viewBox="0 0 120 68" layout="H3">
        <title>横屏-3</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(-8.000000, -238.000000)" stroke="#FFFFFF">
            <g>
              <g id="Group" transform="translate(8.000000, 238.000000)">
                <rect stroke-opacity="0.2" fill-opacity="0.1" fill="#FFFFFF" x="0.5" y="0.5" width="119" height="67"></rect>
                <path d="M60,1.5 L60,66.5" opacity="0.2" stroke-linecap="square"></path>
                <path d="M1.5,34 L59.5,34" opacity="0.2" stroke-linecap="square"></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <svg width="120px" height="68px" viewBox="0 0 120 68" layout="H4">
        <title>横屏-4</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Group-3" stroke="#FFFFFF">
            <rect stroke-opacity="0.2" fill-opacity="0.1" fill="#FFFFFF" x="0.5" y="0.5" width="119" height="67"></rect>
            <path d="M60,1.5 L60,66.5" opacity="0.2" stroke-linecap="square">
            </path>
            <path d="M1.5,33.5 L118.5,33.5" opacity="0.2" stroke-linecap="square"></path>
          </g>
        </g>
      </svg>
    </div>
    <!--竖屏-->
    <div class="layout vertical" style="display: none;">
      <svg width="68px" height="100px" viewBox="0 0 68 100" layout="V1">
        <title>竖屏-1</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1" stroke-opacity="0.2">
          <g transform="translate(-66.000000, -8.000000)" fill="#FFFFFF" stroke="#FFFFFF">
            <g>
              <rect id="\u77E9\u5F62" x="66.5" y="8.5" width="67" height=" 99">
              </rect>
            </g>
          </g>
        </g>
      </svg>

      <svg width="68px" height="100px " viewBox="0 0 68 100" layout="V2">
        <title>竖屏-2</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g  transform="translate(-142.000000,-8.000000)" stroke="#FFFFFF">
            <g>
              <g id="Group" transform="translate(142.000000,8.000000)">
                <rect  stroke-opacity="0.2" fill-opacity="0.1" fill="#FFFFFF" x="0.5" y="0.5" width="67" height="99"></rect>
                <path d="M1.5,50 L98.5,50" id="\u76F4\u7EBF" opacity="0.2" stroke-linecap="square"></path>
                <path d="M34,0 L34,50" opacity="0.2" stroke-linecap="square"></path>
              </g>
            </g>
          </g>
        </g>
      </svg>

      <svg width="68px" height="100px " viewBox="0 0 68 100" layout="V3">
        <title>竖屏-3</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(-8.000000, -238.000000)" stroke="#FFFFFF">
            <g>
              <g id="Group" transform="translate(8.000000, 238.000000)">
                <rect stroke-opacity="0.2" fill-opacity="0.1" fill="#FFFFFF" x="0.5" y="0.5" width="67" height="99"></rect>
                <path d="M1.5,50 L98.5,50" id="\u76F4\u7EBF-copy-1" opacity="0.2" stroke-linecap="square"></path>
                <path d="M34,50 L34,100" opacity="0.2" stroke-linecap="square"></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <svg width="68px" height="100px " viewBox="0 0 68 100" layout="V4">
        <title>竖屏-4</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(-8.000000, -238.000000)" stroke="#FFFFFF">
            <g>
              <g id="Group" transform="translate(8.000000, 238.000000)">
                <rect stroke-opacity="0.2" fill-opacity="0.1" fill="#FFFFFF" x="0.5" y="0.5" width="67" height="99"></rect>
                <path d="M1.5,33 L98.5,33" opacity="0.2" stroke-linecap="square"></path>
                <path d="M1.5,66 L98.5,66" opacity="0.2" stroke-linecap="square"></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <svg width="68px" height="100px " viewBox="0 0 68 100" layout="V5">
        <title>竖屏-4</title>
        <desc>Created with Sketch.</desc>
        <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(-8.000000, -238.000000)" stroke="#FFFFFF">
            <g>
              <g id="Group" transform="translate(8.000000, 238.000000)">
                <rect stroke-opacity="0.2" fill-opacity="0.1" fill="#FFFFFF" x="0.5" y="0.5" width="67" height="99"></rect>
                <path d="M1.5,50 L98.5,50" opacity="0.2" stroke-linecap="square"></path>
                <path d="M34,0 L34,100" id="\u76F4\u7EBF-copy-3" opacity="0.2" stroke-linecap="square"></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div>

    <h3>基本组件</h3>
    <div class="tool_button" id="tool_time" title="时间">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg>
      <h5>时间</h5>
    </div>
    <!-- <div class="tool_button" id="tool_weather" title="天气">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="cloud" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 01140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"></path></svg>
      <h5>天气</h5>
    </div> -->
    <div class="tool_button" id="tool_textarea" title="文本">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg>
      <h5>文本框</h5>
    </div>
    <div class="tool_button" id="tool_material" title="素材框">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="file-image" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M553.1 509.1l-77.8 99.2-41.1-52.4a8 8 0 00-12.6 0l-99.8 127.2a7.98 7.98 0 006.3 12.9H696c6.7 0 10.4-7.7 6.3-12.9l-136.5-174a8.1 8.1 0 00-12.7 0zM360 442a40 40 0 1080 0 40 40 0 10-80 0zm494.6-153.4L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"></path></svg>
      <h5>素材框</h5>
    </div>
    <div class="tool_button" id="tool_live" title="直播">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="play-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M719.4 499.1l-296.1-215A15.9 15.9 0 00398 297v430c0 13.1 14.8 20.5 25.3 12.9l296.1-215a15.9 15.9 0 000-25.8zm-257.6 134V390.9L628.5 512 461.8 633.1z"></path></svg>
      <h5>直播</h5>
    </div>
    <div class="tool_button" id="tool_qr_code" title="二维码">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="qrcode" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M468 128H160c-17.7 0-32 14.3-32 32v308c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V136c0-4.4-3.6-8-8-8zm-56 284H192V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm194 210H136c-4.4 0-8 3.6-8 8v308c0 17.7 14.3 32 32 32h308c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8zm-56 284H192V612h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm590-630H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V160c0-17.7-14.3-32-32-32zm-32 284H612V192h220v220zm-138-74h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm194 210h-48c-4.4 0-8 3.6-8 8v134h-78V556c0-4.4-3.6-8-8-8H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V644h78v102c0 4.4 3.6 8 8 8h190c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8zM746 832h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm142 0h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path></svg>
      <h5>二维码</h5>
    </div>
    <div class="tool_button" id="tool_bar_code" title="条形码">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="barcode" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M120 160H72c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8zm833 0h-48c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8zM200 736h112c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8H200c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8zm321 0h48c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8zm126 0h178c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8H647c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8zm-255 0h48c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8zm-79 64H201c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm257 0h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm256 0H648c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h178c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm-385 0h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path></svg>
      <h5>条形码</h5>
    </div>
    <div class="tool_button" id="tool_webpage" title="网页">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="global" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M854.4 800.9c.2-.3.5-.6.7-.9C920.6 722.1 960 621.7 960 512s-39.4-210.1-104.8-288c-.2-.3-.5-.5-.7-.8-1.1-1.3-2.1-2.5-3.2-3.7-.4-.5-.8-.9-1.2-1.4l-4.1-4.7-.1-.1c-1.5-1.7-3.1-3.4-4.6-5.1l-.1-.1c-3.2-3.4-6.4-6.8-9.7-10.1l-.1-.1-4.8-4.8-.3-.3c-1.5-1.5-3-2.9-4.5-4.3-.5-.5-1-1-1.6-1.5-1-1-2-1.9-3-2.8-.3-.3-.7-.6-1-1C736.4 109.2 629.5 64 512 64s-224.4 45.2-304.3 119.2c-.3.3-.7.6-1 1-1 .9-2 1.9-3 2.9-.5.5-1 1-1.6 1.5-1.5 1.4-3 2.9-4.5 4.3l-.3.3-4.8 4.8-.1.1c-3.3 3.3-6.5 6.7-9.7 10.1l-.1.1c-1.6 1.7-3.1 3.4-4.6 5.1l-.1.1c-1.4 1.5-2.8 3.1-4.1 4.7-.4.5-.8.9-1.2 1.4-1.1 1.2-2.1 2.5-3.2 3.7-.2.3-.5.5-.7.8C103.4 301.9 64 402.3 64 512s39.4 210.1 104.8 288c.2.3.5.6.7.9l3.1 3.7c.4.5.8.9 1.2 1.4l4.1 4.7c0 .1.1.1.1.2 1.5 1.7 3 3.4 4.6 5l.1.1c3.2 3.4 6.4 6.8 9.6 10.1l.1.1c1.6 1.6 3.1 3.2 4.7 4.7l.3.3c3.3 3.3 6.7 6.5 10.1 9.6 80.1 74 187 119.2 304.5 119.2s224.4-45.2 304.3-119.2a300 300 0 0010-9.6l.3-.3c1.6-1.6 3.2-3.1 4.7-4.7l.1-.1c3.3-3.3 6.5-6.7 9.6-10.1l.1-.1c1.5-1.7 3.1-3.3 4.6-5 0-.1.1-.1.1-.2 1.4-1.5 2.8-3.1 4.1-4.7.4-.5.8-.9 1.2-1.4a99 99 0 003.3-3.7zm4.1-142.6c-13.8 32.6-32 62.8-54.2 90.2a444.07 444.07 0 00-81.5-55.9c11.6-46.9 18.8-98.4 20.7-152.6H887c-3 40.9-12.6 80.6-28.5 118.3zM887 484H743.5c-1.9-54.2-9.1-105.7-20.7-152.6 29.3-15.6 56.6-34.4 81.5-55.9A373.86 373.86 0 01887 484zM658.3 165.5c39.7 16.8 75.8 40 107.6 69.2a394.72 394.72 0 01-59.4 41.8c-15.7-45-35.8-84.1-59.2-115.4 3.7 1.4 7.4 2.9 11 4.4zm-90.6 700.6c-9.2 7.2-18.4 12.7-27.7 16.4V697a389.1 389.1 0 01115.7 26.2c-8.3 24.6-17.9 47.3-29 67.8-17.4 32.4-37.8 58.3-59 75.1zm59-633.1c11 20.6 20.7 43.3 29 67.8A389.1 389.1 0 01540 327V141.6c9.2 3.7 18.5 9.1 27.7 16.4 21.2 16.7 41.6 42.6 59 75zM540 640.9V540h147.5c-1.6 44.2-7.1 87.1-16.3 127.8l-.3 1.2A445.02 445.02 0 00540 640.9zm0-156.9V383.1c45.8-2.8 89.8-12.5 130.9-28.1l.3 1.2c9.2 40.7 14.7 83.5 16.3 127.8H540zm-56 56v100.9c-45.8 2.8-89.8 12.5-130.9 28.1l-.3-1.2c-9.2-40.7-14.7-83.5-16.3-127.8H484zm-147.5-56c1.6-44.2 7.1-87.1 16.3-127.8l.3-1.2c41.1 15.6 85 25.3 130.9 28.1V484H336.5zM484 697v185.4c-9.2-3.7-18.5-9.1-27.7-16.4-21.2-16.7-41.7-42.7-59.1-75.1-11-20.6-20.7-43.3-29-67.8 37.2-14.6 75.9-23.3 115.8-26.1zm0-370a389.1 389.1 0 01-115.7-26.2c8.3-24.6 17.9-47.3 29-67.8 17.4-32.4 37.8-58.4 59.1-75.1 9.2-7.2 18.4-12.7 27.7-16.4V327zM365.7 165.5c3.7-1.5 7.3-3 11-4.4-23.4 31.3-43.5 70.4-59.2 115.4-21-12-40.9-26-59.4-41.8 31.8-29.2 67.9-52.4 107.6-69.2zM165.5 365.7c13.8-32.6 32-62.8 54.2-90.2 24.9 21.5 52.2 40.3 81.5 55.9-11.6 46.9-18.8 98.4-20.7 152.6H137c3-40.9 12.6-80.6 28.5-118.3zM137 540h143.5c1.9 54.2 9.1 105.7 20.7 152.6a444.07 444.07 0 00-81.5 55.9A373.86 373.86 0 01137 540zm228.7 318.5c-39.7-16.8-75.8-40-107.6-69.2 18.5-15.8 38.4-29.7 59.4-41.8 15.7 45 35.8 84.1 59.2 115.4-3.7-1.4-7.4-2.9-11-4.4zm292.6 0c-3.7 1.5-7.3 3-11 4.4 23.4-31.3 43.5-70.4 59.2-115.4 21 12 40.9 26 59.4 41.8a373.81 373.81 0 01-107.6 69.2z"></path></svg>
      <h5>网页</h5>
    </div>
  </div> <!-- tools_left -->

  <div id="tools_bottom" class="tools_panel">
    <div id="tools_bottom_3" style="display: none;">
      <div id="palette" title="Click to change fill color, shift-click to change stroke color"></div>
    </div>
  </div>

  <!-- hidden divs -->
  <div id="color_picker"></div>
  <!-- 素材轮播区域-->
  <section id="material_field">
    <div class="title">
      <span class="cart-down">内容轮播</span>
    </div>
    <div id="zoom_panel" class="toolset" title="Change zoom level">
      <div class="draginput select" id="zoom_label">
        比例尺：<input id="zoom" size="3" value="100%" type="text" readonly="readonly" />%
      </div>
    </div>
    <div class="content">
      <ul>
        <li><span class="del" style="display: none;">×</span>
          <div class="preview active" data-index="1"></div>
          <div class="duration"><span>时长</span>
            <div class="number"></div><span>秒</span>
          </div>
        </li>
      </ul>
      <img src="images/add.711f68eb.svg">
    </div>
  </section>
  <!-- 素材轮播区域-->
</div> 

<ul id="cmenu_canvas" class="contextMenu">
  <li><a href="#top" id="top">置顶 <span class="shortcut">Ctrl+⇧↑</span></a></li>
  <li><a href="#down" id="down">置底 <span class="shortcut">Ctrl+⇧↓</span></a></li>
  <li><a href="#cut" id="cut">剪切 <span class="shortcut">⌘X;</span></a></li>
  <li><a href="#copy" id="copy">复制<span class="shortcut">⌘C</span></a></li>
  <li><a href="#paste" id="paste">粘贴<span class="shortcut">⌘V</span></a></li>
  <li class="separator"><a href="#delete" id="delete">删除<span class="shortcut">Delete/BackSpace</span></a></li>
</ul>

<section id="preview_container" style="display: none;">
  <div class="content">
    <button type="button" class="ant-modal-close"><span class="ant-modal-close-x"><i
          aria-label="图标: close" class="anticon anticon-close ant-modal-close-icon"><svg viewBox="64 64 896 896"
            focusable="false" class="" data-icon="close" width="1.5em" height="1.5em" fill="currentColor"
            aria-hidden="true">
            <path
              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z">
            </path>
          </svg></i></span></button>
    <div class="body"></div>
  </div>
</section>

<div id="temp" style="display:none;"></div>
<!--loading-->
<div class="loading pageLoading">
  <span class="ant-spin-dot ant-spin-dot-spin">
    <i class="ant-spin-dot-item"></i>
    <i class="ant-spin-dot-item"></i>
    <i class="ant-spin-dot-item"></i>
    <i class="ant-spin-dot-item"></i>
  </span>
  <div class="ant-spin-text"></div>
</div>
<div class="ant-message">
  <div class="ant-message-notice">
    <div class="ant-message-notice-content">
      <div class="ant-message-custom-content ant-message-warning">
        <span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle">
          <svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em"
            fill="currentColor" aria-hidden="true">
            <path
              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z">
            </path>
          </svg>
        </span>
        <span class="text">This is a warning message</span>
      </div>
    </div>
  </div>
</div>
<div class="ant-tooltip">
  <div class="ant-tooltip-content">
    <div class="ant-tooltip-arrow">
      <span class="ant-tooltip-arrow-content"></span>
    </div>
    <div class="ant-tooltip-inner">
      <span></span>
    </div>
  </div>
</div>
<ul id="conMenu">
  <input type="hidden" id="selected">
  <li id="syncTag"><input type="checkbox">同步</li>
  <li id="preserveAspectRatio"><input type="checkbox">填充</li>
</ul>
<div class="ant-modal-mask"></div>
<div tabindex="-1" class="ant-modal-wrap" role="dialog" for="sync">
  <div role="document" class="ant-modal" style="width: 350px;">
    <div class="ant-modal-content">
      <button type="button" aria-label="Close" class="ant-modal-close">
        <span class="ant-modal-close-x">
          <span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon">
            <svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
              <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z">
              </path>
            </svg>
          </span>
        </span>
      </button>
      <div class="ant-modal-header">
        <div class="ant-modal-title">同步提示</div>
      </div>
      <div class="ant-modal-body"></div>
    </div>
  </div>
</div>
<div tabindex="-1" class="ant-modal-wrap" role="dialog" for="edit_out">
  <div role="document" class="ant-modal" style="width: 350px;">
    <div class="ant-modal-content">
      <button type="button" aria-label="Close" class="ant-modal-close">
        <span class="ant-modal-close-x">
          <span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon">
            <svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
              <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z">
              </path>
            </svg>
          </span>
        </span>
      </button>
      <div class="ant-modal-header">
        <div class="ant-modal-title">退出编辑</div>
      </div>
      <div class="ant-modal-body">
        <div>是否保存当前节目？</div>
      </div>
      <div class="ant-modal-footer">
        <button type="button" class="ant-btn ant-btn-default"><span>不保存</span></button>
        <button type="button" class="ant-btn ant-btn-primary"><span>保 存</span></button>
      </div>
    </div>
  </div>
</div>
<div tabindex="-1" class="ant-modal-wrap" role="dialog" for="layout">
  <div role="document" class="ant-modal" style="width: 350px;">
    <div class="ant-modal-content">
      <button type="button" aria-label="Close" class="ant-modal-close">
        <span class="ant-modal-close-x">
          <span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon">
            <svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
              <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z">
              </path>
            </svg>
          </span>
        </span>
      </button>
      <div class="ant-modal-header">
        <div class="ant-modal-title">切换模板</div>
      </div>
      <div class="ant-modal-body">
        <div>切换模板可能导致当前内容丢失，是否切换？</div>
      </div>
      <div class="ant-modal-footer">
        <button type="button" class="ant-btn ant-btn-default"><span>取 消</span></button>
        <button type="button" class="ant-btn ant-btn-primary"><span>确 定</span></button>
      </div>
    </div>
  </div>
</div>
</body>

</html>